<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { LanguageItem } from '../internationalization/index';
  import { Emits } from '../utils/types';
  const eimts: Emits = createEventDispatcher();
  const LOAD_TYPE = ['loadstart', 'loadStateType', 'waiting', 'ended', 'error', 'stalled'];
  export let nowLanguage: LanguageItem;
  export let loadType: string = nowLanguage.loading;
  export let loadingText: string = '';
  export let loadingDom: string = '';
  export let loadingImg: string = '';
  export let loadingType: string = '';
  let loadingStyle: string = '';
  const replayHandle = () => {
    // 取出视频空间重新播放
    eimts('playHandle');
  };
  $: {
    let style = 'background: rgba(0, 0, 0, .1);z-index:1';
    if (loadType === 'loadstart') {
      style = 'background: rgba(0, 0, 0, 1);;z-index:3';
    }
    loadingStyle = style;
  }
</script>

{#if LOAD_TYPE.includes(loadType)}
  <div class="d-loading" style={loadingStyle}>
    <div>
      <!-- 初始化加载 ,缓冲中-->
      {#if ['loadstart', 'waiting'].includes(loadType)}
        <span>
          {#if loadingDom}
            {@html loadingDom}
          {:else if loadingImg}
            <img src={loadingImg} alt="" class="rotating f50 loading-img" />
          {:else if loadingType === 'ths'}
            <div class="d-logo-loading">
              <div class="d-logo" />
              <div class="d-light" />
            </div>
          {:else}
            <i class="rotating iconfont icon-loading f50" />
          {/if}
          <p>{loadingText}</p>
        </span>
      {/if}
      <!-- 播放结束 -->
      {#if loadType == 'ended'}
        <span>
          <!-- svelte-ignore a11y-click-events-have-key-events -->
          <p on:click={replayHandle} class="d-flex-x d-pointer">
            <i class="iconfont icon-replay f24 mr5" />{nowLanguage.replay}
          </p>
        </span>
      {/if}
      <!-- 播放错误 -->
      {#if loadType == 'error' || loadType == 'stalled'}
        <span>
          <!-- svelte-ignore a11y-click-events-have-key-events -->
          <p on:click={replayHandle} class="d-flex-x d-pointer">
            <i class="iconfont icon-replay f24 mr5" />{nowLanguage.playError}
          </p>
        </span>
      {/if}
    </div>
  </div>
{/if}

<style lang="less">
  @import '../style/iconfont.css';
  @import '../style/reset.less';
  @import '../style/base.less';
  @import '../style/animate.less';
  @import '../style/transition.less';
  .f50 {
    font-size: 50px;
  }
  .f24 {
    font-size: 24px;
  }
  .d-loading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
    color: #efefef;
    text-align: center;
    font-size: 13px;
  }
  .loading-img {
    width: 50px;
  }
  .d-logo-loading {
    position: relative;
    width: 100px;
    height: 23px;
    overflow: hidden;
    .d-logo {
      width: 100%;
      height: 100%;
      background: url(https://s.thsi.cn/cd/ths-frontend-hxmui-container/front/thsc-hxmui/1.11.0/img/logo_light.ed78645a.png)
        50%;
      background-size: cover;
    }
    .d-light {
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 32px;
      height: 23px;
      background: url()
        50%;
      background-size: cover;
      opacity: 0.6;
      -webkit-animation: move 0.8s ease-in-out infinite;
      animation: move 0.8s ease-in-out infinite;
    }
  }
  @keyframes move {
    from {
      left: 0;
    }
    to {
      left: 100%;
    }
  }
</style>
